<template>
  <div>
        <el-card>
            <div class="t-title">
                {{ t.type=='radio'?"单选":"多选" }}<br />
                {{ t.title }}
            </div>
            <el-checkbox-group @change="next(t.type)" v-if="t.type=='mult'" v-model="answer">
                <el-checkbox label="A" border>{{ t.A }}</el-checkbox>
                <el-checkbox label="B" border>{{ t.B }}</el-checkbox>
                <el-checkbox label="C" border>{{ t.C }}</el-checkbox>
                <el-checkbox label="D" border>{{ t.D }}</el-checkbox>
            </el-checkbox-group>
            <el-radio-group @change="next(t.type)" v-else v-model="answer">
                <el-radio label="A" border>{{ t.A }}</el-radio>
                <el-radio label="B" border>{{ t.B }}</el-radio>
                <el-radio label="C" border>{{ t.C }}</el-radio>
                <el-radio label="D" border>{{ t.D }}</el-radio>
            </el-radio-group>
        </el-card>
  </div>
</template>

<script>
export default {
    name:"mainTtable",
    data(){
        return {
            answer:[]
        }
    },
    methods:{
        next(type){
            type != "mult" && this.$emit("next");
        }
    },
    props:{
        t:{
            type:Object,
            default(){
                return {}
            }
        },
    },
    watch:{
        tt(){
            if(this.t.type=="mult")
            this.answer = this.t.answer.split("")
            else
            this.answer = this.t.answer
        },
        answer(){
            if (this.t.type == "mult")
            this. $emit("change",this.answer.join(""))
            else
            this. $emit("change",this.answer)
        }
    },
    computed:{
        tt(){
            return this.t
        }
    },

}
</script>

<style scoped>
.el-checkbox-group{
    width: 100%;
}
.el-radio-group{
    width: 100%;
}

.el-radio{
    width: 100%;
}
.el-radio.is-bordered+.el-radio.is-bordered{
    margin: 0;
}
.el-checkbox{
    width: 100%;
}
.el-checkbox.is-bordered+.el-checkbox.is-bordered{
    margin: 0;
}
.t-title{
    min-height: 100px;
    max-height: 200px;
    padding: 10px;
}
</style>